import { useState } from 'react';
import { useHistory } from 'react-router-dom';
import cls from 'classnames';
import store from 'store';
import styles from './index.module.scss';

type Lang = 'zh_CN' | 'en_US' | 'ja_JP';
const LANG_OPTIONS: {
  key: Lang,
  text: string
}[] = [
  {
    key: 'zh_CN',
    text: '中文',
  },
  {
    key: 'en_US',
    text: 'EN',
  },
  {
    key: 'ja_JP',
    text: '日本語',
  },
]

const GREETING_TEXT: {
  [key: string]: {
      welcome: string,
      to?: string,
      asoul: string,
      museum: string,
      letterSpacing?: boolean,
      entranceText: string,
  }
} = {
  zh_CN: {
    welcome: '欢迎来到',
    asoul: 'A-SOUL',
    museum: '展览馆',
    letterSpacing: true,
    entranceText: '进入',
  },
  en_US: {
    welcome: 'Welcome',
    to: 'to',
    asoul: 'A-SOUL',
    museum: 'Museum',
    entranceText: 'SIGN IN',
  },
  ja_JP: {
    welcome: '欢迎来到',
    asoul: 'A-SOUL',
    museum: '展览馆',
    letterSpacing: true,
    entranceText: '进入',
  },
}

export default () => {
  const history = useHistory()
  const [lang, setLang] = useState<Lang>('zh_CN')

  return (
    <div className={styles.login}>
      <div className={styles.blurBgImg}></div>
      <div className={styles.loginInner}>
        <section className={styles.greetingSec}>
          <h1 className={cls(styles.greetingHeader, GREETING_TEXT[lang].letterSpacing && styles.cnHeader)}>
            <p className={styles.welcome}>{GREETING_TEXT[lang].welcome}</p>
            <p className={styles.linewrapper}>
              <p className={styles.to}>{GREETING_TEXT[lang].to && GREETING_TEXT[lang].to}</p>
              <p className={styles.asoul}>{GREETING_TEXT[lang].asoul}</p>
            </p>
            <p className={styles.museum}>{GREETING_TEXT[lang].museum}</p>
          </h1>
          <div className={cls(styles.entrance,  )}>
            <button
              className={cls(
                styles.entBtn,
                GREETING_TEXT[lang].letterSpacing && styles.cnEntBtn
              )}
              onClick={() => { store.login(); history.push('/'); }}
            >
              {GREETING_TEXT[lang].entranceText}
            </button>
          </div>
        </section>
        <section className={styles.langSec}>
          <ul className={styles.langList}>
            {LANG_OPTIONS.map(({key, text}) => (
              <li
                className={cls(styles[key], styles.langItem)}
                key={key}
              >
                <a
                  className={cls(lang === key? styles.active: null)}
                  href="#/"
                  onClick={() => setLang(key)}
                >
                  {text}
                </a>
              </li>
            ))}
          </ul>
        </section>
      </div>
    </div>
  )
}
